<template>
  <div class="app-container">
    <basics-form
      :minWidth="'300px'"
      ref="basicsForm"
      :actionLoading="loading"
      @actionBtnsClick="actionBtnsClick"
      @submit="search"
    />
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="testDate" label="时间"> </el-table-column>
      <el-table-column label="收缩压(mmHg)">
        <template slot-scope="scope">
          <div :style="{ fontSize: scope.row.isSbpAbnormal?'20px':'' ,color: scope.row.isSbpAbnormal ? colors[scope.row.sbpAbnormalLevel-1] : '' }">{{
            scope.row.sbp
          }}</div>
        </template>
      </el-table-column>
      <el-table-column label="舒张压(mmHg)">
        <template slot-scope="scope">
          <div :style="{fontSize: scope.row.isDbpAbnormal?'20px':''  , color:  scope.row.isDbpAbnormal ? colors[scope.row.dbpAbnormalLevel-1] : '' }">{{
            scope.row.dbp
          }}</div>
        </template>
      </el-table-column>

      <el-table-column label="脉搏(次/分)">
        <template slot-scope="scope">
          {{ scope.row.hr }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="$refs.basicsForm.formValid()"
    />
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
import { patientBloodPressureTestList } from "@/api/manbing/patient";
export default {
  name: "patient-table",
  components: { BasicsForm },
  props:{
    patientName:{
      default:'',
      type:String
    }
  },
  data() {
    return {
      colors:['#409EFF','rgb(253,154,1)','red'],//警告颜色
      loading: false,
      tableLoading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
    };
  },
  created() {},
  methods: {
    init(patientId) {
      this.tableData=[]
      this.queryParams.pageNum=1
      this.queryParams.patientId = patientId;
      this.$nextTick(() => {
        this.initRules();
        this.getList();
      });
    },
    //顶部搜索组件
    initRules() {
      let rules = [
        {
          title: "日期",
          key: "date",
          type: "daterange",
          skip: true,
        },
        {
          type: "actionBtns",
          selectList: [{ name: "搜索", value: "primary" },{ name: "导出", value: "success" }],
          ruleWidth: "auto",
        },
      ];
      this.$refs.basicsForm.initForm(rules);
    },
    //顶部按钮点击
    actionBtnsClick(index) {
      if(index){
        this.download('/chronicdisease/hospital/patientBloodPressureTestExport', {
                ...this.queryParams
              }, `${this.patientName||'患者'}测量数据列表_${new Date().getTime()}.xlsx`)
      }else{
        this.queryParams.pageNum = 1;
        this.$refs.basicsForm.formValid();
      }
    },
    //搜索
    search(param) {
      if (!param) {
        return;
      }
      this.queryParams.startDate = "";
      this.queryParams.endDate = "";
      if (param.date && param.date.length) {
        this.queryParams.startDate = param.date[0];
        this.queryParams.endDate = param.date[1];
      }
      this.getList();
    },
    //列表数据
    getList() {
      this.loading = true;
      this.tableLoading = true;
      patientBloodPressureTestList(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
  },
};
</script>
